import React from 'react'
import IconFont from '../ui-components/iconFont'
import Tip from '../ui-components/tip'
import style from './style'
import Code from './Code'
import styleIcon from './style.iconfont'
import styleApp from './style.app'

const icons = [
	'ait',
	'comment',
	'review',
	'home',
	'pic',
	'smile',
	'target',
	'team',
	'zan',
	'plus',
	'close',
	'arrow',
	'more',
	'delete',
	'ui',
	'bell',
	'zan-clicked',
	'zan-unclicked',
	'weixin',
  'edit',
	'drag',
  'avatar',
  'tick',
	'remove',
	'modify',
	'search',
	'lock',
  'eye',
  'email',
  'phone',
  'wechat',
  'message',
  'settings'
]

export default () => (
	<div className={style.root}>
		<Code>{'<IconFont color={[,blue, lightblue]} value={..} size={..}/>'}</Code>
		<div className={styleIcon.root}>
			{
				icons.map((v, i) => {
          const T = Tip(
            <IconFont 
              value={v} 
              key={i} 
              size="25"
            />
          )
          return (
            <div className={styleIcon.item}>
              <T 
                root={`.${styleApp.content}`} 
                bottom 
                tip={v}
              />
            </div>
          )
        })
			}
		</div>
	</div>
)
